<script setup>
import { ref } from "vue";
const emits = defineEmits(["submit"]);
const modalRef = ref();
const seachTableRef = ref();
const tableLoading = ref(false);
const tableData = ref([]);
const totalPage = ref(0);
const tableConfig = ref([
  {
    prop: "fzr",
    type: "slot",
    slotName: "fzr",
    label: "商品名称",
    width: "500",
  },
  {
    prop: "ckpfj",
    label: "参考批发价",
  },
  {
    prop: "kskc",
    label: "可售库存",
    fixed: "right",
  },
]);
const formInline = ref([
  {
    type: "input",
    width: "180",
    placeholder: "商品名称/编码",
    label: "",
    prop: "type",
    model: [],
  },
]);
const handlerSearch = () => {};
const selectHandle = () => {};
const selectAllHandle = () => {};
const open = () => {
  modalRef.value.open();
};
const closeModal = () => {
  modalRef.value.close();
};

const submitModal = () => {
  emits("submit");
};
defineExpose({ open });
</script>
<template>
  <Modal ref="modalRef" :title="'选择商品'" :width="'1000px'" :top="'15vh'">
    <template #content>
      <SeachTable
        :tableType="1"
        class="searchTableBox"
        ref="seachTableRef"
        :tableSelection="true"
        :showLine="false"
        :showBtn="false"
        :forms="formInline"
        :tableLoading="tableLoading"
        :tableConfig="tableConfig"
        :tableData="tableData"
        :totalPage="totalPage"
        @handlerSearch="handlerSearch"
        @selectHandle="selectHandle"
        @selectAllHandle="selectAllHandle"
      >
        <template #fzr="{ row }">
          <div class="fzr_name">
            产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称
          </div>
          <div class="fzr_tip"></div>
        </template>
      </SeachTable>
    </template>
    <template #footer>
      <div>
        <el-button @click="closeModal">取消</el-button>
        <el-button type="primary" @click="submitModal">确定</el-button>
      </div>
    </template>
  </Modal>
</template>

<style lang="less" scoped>
.fzr_name {
  color: #222222;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}
.fzr_tip {
  margin-top: 8px;
  color: #666666;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}
.searchTableBox {
  :deep(.search-table .search-line) {
    padding: 0;
    padding-top: 4px !important;
  }
  :deep(.search-table .table) {
    padding: 0;
  }
  :deep(.el-table th > .cell) {
    border-right: 1px solid #ddd !important;
  }
  :deep(.el-table .is-first-column > .cell){
    border-right: 0 !important;
  }
}
</style>
